<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div v-for="item in skillList" :key="item.name">{{item.name}}</div>
</div>
</body>
<script src="../../js/vuex.js"></script>
<script src="../../js/vue.js"></script>
<script type="text/javascript">
    const store = new Vuex.Store({
        state: {
            name: '句号',
            age: 18,
            skill: [
                {name: 'Vue', type: 1},
                {name: 'React', type: 1},
                {name: 'JAVA', type: 2},
                {name: 'Webpack', type: 3},
                {name: 'Node', type: 1},
            ]
        },
        getters: {
            skillList: state => {
                return state.skill.filter(item => item.type === 1)
            },
            skillCount:(state,getters)=>{
                return getters.skillList.length
            },
        }
    })
    var vm = new Vue({
        el: '#app',
        store,
        computed: {
            ...Vuex.mapGetters(['skillList','skillCount'])
        }
    })
</script>
</html>
